<!-- 发布买家秀 -->
<template>
	<view class="page">
		<view class="fbottom">
			<view class="fname">文字描述</view>
			<textarea class="input" placeholder="请填写" placeholder-class="peditext" name="introduction" @input="introcon"
				style="height:144rpx" :value="introduction" maxlength="-1"></textarea>
		</view>
		<view class="fbottom noneborbt">
			<view class="fname">上传图片(最多九张)</view>
			<view class="input">
				<view class="logoStore" v-if="islogo == true">
					<view mode="aspectFill" @click='remove(0)' class='remove cross-center main-center'>x</view>
					<image class="image" :src="logoStore" @click='previewImage(0)'></image>
				</view>
				<app-upload-image @cancelon="can" v-else height="170" minheight="170" :islogo="false" :value="logoStore"
					:showNumber="false" @image-event="uploadlogo" maxNum="9" margin="20rpx 0 0">
				</app-upload-image>
			</view>
		</view>
		<view class="befbutton">
			<button class="fbutton bgbut" @click="formSubmit">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import appUploadImage from '../../components/basic-component/app-upload-image/app-upload-image'
	export default {
		components: {
			appUploadImage
		},
		data() {
			return {
				logoStore: '',
				imgList: [],
				islogo: false,
				upvipic: false,
				introduction: '',
				// target_type--->0:发布 1:评论 2:回复
				target_type: 0,

				mall_id: 1,
				title: ''
			}
		},
		onLoad(options) {
			this.mall_id = options.mall_id || 1
			// this.$store.dispatch('malid/actionSetMallId', this.mall_id)
			if (options.title) {
				uni.setNavigationBarTitle({
					title: options.title
				})
			}
		},
		computed: {
			...mapState({
				storemall: state => state.malid.apimaUrl
			})
		},
		methods: {
			uploadlogo(e) {
				this.logoStore = e.imageList[0]
				this.imgList = e.imageList
			},
			can(e) {
				this.upvipic = e
			},
			introcon(e) {
				this.introduction = e.detail.value
			},
			formSubmit(e) {
				let formbody = {
					type: this.target_type,
					title: '',
					content: this.introduction,
					pic_url: this.imgList,
					pid: 0,
					form_data: []
				}
				this.$request({
					url: this.storemall.entity.buyershow,
					data: {
						target_type: this.target_type,
						formbody: JSON.stringify(formbody)
					},
					method: 'post'
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					uni.navigateBack({
						delta: 1
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #FFFFFF;
		width: 100%;
		height: 100vh;
	}

	.fbottom {
		width: 550rpx;
		margin: 0 auto;
		padding: 24rpx 0 0;
		line-height: 72rpx;
		border-bottom: 2rpx solid #F2F2F2;

		&.noneborbt {
			border-bottom: none;
		}

		// display: flex;
		// align-items: center;
		font-size: 28rpx;
		color: #333333;
	}

	.input {
		display: flex;
	}

	.fbottom .fname {
		// width: 176rpx;
	}

	.peditext {
		color: #999999;
	}

	// .fbottom .input {
	// 	width: 374rpx;
	// }

	.fbottom .input .logoStore {
		width: 170rpx;
		height: 170rpx;
		position: relative;
	}

	.fbottom .input .logoStore .remove {
		width: 40#{rpx};
		height: 40#{rpx};
		position: absolute;
		right: -16rpx;
		top: -10rpx;
		// background: $uni-important-color-red;
		background: #333333;
		color: #fff;
		border-radius: 50%;
		padding-bottom: 8#{rpx};
		font-size: 24#{rpx};
	}

	.fbottom .input .logoStore .image {
		width: 100%;
		height: 100%;
	}

	.fbottom .input .logoStore.bg {
		background: #F4F4F4;
		position: relative;
	}

	.fbottom .input .logoStore .logoStore-hor {
		position: absolute;
		width: 80rpx;
		height: 2rpx;
		left: 48rpx;
		top: 87rpx;
		background: #FFFFFF;
	}

	.fbottom .input .logoStore .logoStore-ver {
		position: absolute;
		width: 80rpx;
		height: 2rpx;
		left: 48rpx;
		top: 87rpx;
		background: #FFFFFF;
		transform: rotate(90deg);
	}

	.fbottom .input.time {
		display: flex;
		align-items: center;
	}

	.fbottom .input .center {
		padding: 0 20rpx;
	}

	.befbutton {
		background: #342B2A;
		border-radius: 64rpx;
		width: 686rpx;
		height: 88rpx;
		margin: 48rpx auto;
		overflow: hidden;
	}

	.fbutton {
		border-radius: 64rpx;
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-weight: bold;
		font-size: 36rpx;
	}

	.bsbut {
		color: #FFFFFF;
		background: #CD9C62;
	}

	.bgbut {
		background: #342B2A;
		color: #FFFFFF;
	}

	.bcbut {
		border: 1rpx solid #342B2A;
		color: #342B2A;
	}
</style>
